റിയാക്ടിൽ മികച്ച റിസോഴ്സ് ലോഡിംഗ്: ഹുക്ക്സ് ഉപയോഗിച്ച് എറർ ബൗണ്ടറികൾ മാസ്റ്റർ ചെയ്യാം

ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളിൽ, അസിൻക്രണസ് ആയി റിസോഴ്സുകൾ ലോഡ് ചെയ്യുന്നത് ഒരു സാധാരണ രീതിയാണ്. എപിഐയിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുകയാണെങ്കിലും, ചിത്രങ്ങൾ ലോഡ് ചെയ്യുകയാണെങ്കിലും, അല്ലെങ്കിൽ മൊഡ്യൂളുകൾ ഇമ്പോർട്ട് ചെയ്യുകയാണെങ്കിലും, റിസോഴ്സ് ലോഡിംഗ് സമയത്ത് ഉണ്ടാകാനിടയുള്ള പിശകുകൾ കൈകാര്യം ചെയ്യുന്നത് സുഗമമായ ഉപയോക്തൃ അനുഭവത്തിന് അത്യന്താപേക്ഷിതമാണ്. റിയാക്റ്റ് എറർ ബൗണ്ടറികൾ, അവയുടെ ചൈൽഡ് കമ്പോണന്റ് ട്രീയിലെവിടെയുമുള്ള ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ കണ്ടെത്താനും, ആ പിശകുകൾ ലോഗ് ചെയ്യാനും, ആപ്ലിക്കേഷൻ മുഴുവനായി ക്രാഷ് ആകുന്നതിനു പകരം ഒരു ഫാൾബാക്ക് UI കാണിക്കാനും ഒരു സംവിധാനം നൽകുന്നു. റിസോഴ്സ് ലോഡിംഗ് പിശകുകൾ കൈകാര്യം ചെയ്യാൻ റിയാക്റ്റ് ഹുക്കുകളുമായി ചേർന്ന് എറർ ബൗണ്ടറികൾ എങ്ങനെ ഫലപ്രദമായി ഉപയോഗിക്കാം എന്ന് ഈ ലേഖനം വിശദീകരിക്കുന്നു.

എറർ ബൗണ്ടറികളെക്കുറിച്ച് മനസ്സിലാക്കാം

റിയാക്റ്റ് 16-ന് മുമ്പ്, കമ്പോണന്റ് റെൻഡറിംഗ് സമയത്ത് കൈകാര്യം ചെയ്യപ്പെടാത്ത ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ റിയാക്റ്റിന്റെ ആന്തരിക സ്റ്റേറ്റിനെ നശിപ്പിക്കുകയും തുടർന്നുള്ള റെൻഡറുകളിൽ അവ്യക്തമായ പിശകുകൾക്ക് കാരണമാവുകയും ചെയ്തിരുന്നു. എറർ ബൗണ്ടറികൾ ഈ പ്രശ്നം പരിഹരിക്കുന്നത്, അവയുടെ ചൈൽഡ് കമ്പോണന്റുകളിൽ സംഭവിക്കുന്ന പിശകുകൾക്ക് ഒരു ക്യാച്ച്-ഓൾ ബ്ലോക്കായി പ്രവർത്തിച്ചുകൊണ്ടാണ്. അവ താഴെ പറയുന്ന ഒന്നോ അല്ലെങ്കിൽ രണ്ടുമോ ലൈഫ് സൈക്കിൾ മെത്തേഡുകൾ നടപ്പിലാക്കുന്ന റിയാക്റ്റ് കമ്പോണന്റുകളാണ്:

• static getDerivedStateFromError(error): ഒരു ഡിസൻഡന്റ് കമ്പോണന്റ് ഒരു പിശക് ത്രോ ചെയ്തതിന് ശേഷം ഈ സ്റ്റാറ്റിക് മെത്തേഡ് വിളിക്കപ്പെടുന്നു. ത്രോ ചെയ്ത പിശക് ഇതിന് ഒരു ആർഗ്യുമെന്റായി ലഭിക്കുകയും കമ്പോണന്റിന്റെ സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നതിനായി ഒരു മൂല്യം തിരികെ നൽകുകയും ചെയ്യുന്നു.
• componentDidCatch(error, info): ഒരു ഡിസൻഡന്റ് കമ്പോണന്റ് ഒരു പിശക് ത്രോ ചെയ്തതിന് ശേഷം ഈ ലൈഫ് സൈക്കിൾ മെത്തേഡ് വിളിക്കപ്പെടുന്നു. ത്രോ ചെയ്ത പിശക് ഒരു ആർഗ്യുമെന്റായും, ഏത് കമ്പോണന്റാണ് പിശക് ത്രോ ചെയ്തതെന്ന വിവരങ്ങൾ അടങ്ങിയ ഒരു ഒബ്ജക്റ്റും ഇതിന് ലഭിക്കുന്നു. പിശകുകളുടെ വിവരങ്ങൾ ലോഗ് ചെയ്യാൻ നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കാം.

പ്രധാനമായും, എറർ ബൗണ്ടറികൾ അവയുടെ കീഴിലുള്ള മുഴുവൻ ട്രീയിലെയും റെൻഡറിംഗ് ഘട്ടത്തിലും, ലൈഫ് സൈക്കിൾ മെത്തേഡുകളിലും, കൺസ്ട്രക്റ്ററുകളിലും ഉണ്ടാകുന്ന പിശകുകൾ മാത്രമേ കണ്ടെത്തുകയുള്ളൂ. അവ ഇനിപ്പറയുന്നവയ്ക്കുള്ള പിശകുകൾ കണ്ടെത്തുകയില്ല:

• ഇവന്റ് ഹാൻഡ്‌ലറുകൾ (താഴെയുള്ള വിഭാഗത്തിൽ കൂടുതൽ പഠിക്കുക)
• അസിൻക്രണസ് കോഡ് (ഉദാഹരണത്തിന്, setTimeout അല്ലെങ്കിൽ requestAnimationFrame കോൾബാക്കുകൾ)
• സെർവർ-സൈഡ് റെൻഡറിംഗ്
• എറർ ബൗണ്ടറിയുടെ ചിൽഡ്രനിലല്ലാതെ, എറർ ബൗണ്ടറിയിൽ തന്നെ ത്രോ ചെയ്യപ്പെടുന്ന പിശകുകൾ

എറർ ബൗണ്ടറികളും റിയാക്റ്റ് ഹുക്കുകളും: ഒരു ശക്തമായ സംയോജനം

എറർ ബൗണ്ടറികൾ നടപ്പിലാക്കാൻ പരമ്പരാഗതമായി ക്ലാസ് കമ്പോണന്റുകളാണ് ഉപയോഗിച്ചിരുന്നതെങ്കിലും, റിയാക്റ്റ് ഹുക്കുകൾ കൂടുതൽ ലളിതവും ഫങ്ഷണലുമായ ഒരു സമീപനം നൽകുന്നു. പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ലോജിക് ഉൾക്കൊള്ളുന്നതും, റിസോഴ്സ് ലോഡിംഗ് സമയത്ത് പിശകുകൾ ത്രോ ചെയ്യാൻ സാധ്യതയുള്ള കമ്പോണന്റുകളെ എളുപ്പത്തിൽ റാപ്പ് ചെയ്യാൻ സഹായിക്കുന്നതുമായ ഒരു പുനരുപയോഗിക്കാവുന്ന useErrorBoundary ഹുക്ക് നമുക്ക് സൃഷ്ടിക്കാൻ കഴിയും.

ഒരു കസ്റ്റം useErrorBoundary ഹുക്ക് ഉണ്ടാക്കുന്നു

ഒരു useErrorBoundary ഹുക്കിന്റെ ഉദാഹരണം താഴെ നൽകുന്നു:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

വിശദീകരണം:

• useState: എറർ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ നമ്മൾ useState ഉപയോഗിക്കുന്നു. ഇത് തുടക്കത്തിൽ എററിനെ null ആയി സജ്ജീകരിക്കുന്നു.
• useCallback: resetError, captureError എന്നീ ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യാൻ നമ്മൾ useCallback ഉപയോഗിക്കുന്നു. ഈ ഫംഗ്ഷനുകൾ പ്രോപ്‌സായി കൈമാറുകയാണെങ്കിൽ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയാൻ ഇത് സഹായിക്കും.
• ErrorBoundary കമ്പോണന്റ്: ഇത് useCallback ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു ഫങ്ഷണൽ കമ്പോണന്റാണ്, ഇത് children, ഓപ്ഷണലായി ഒരു fallback പ്രോപ്പും സ്വീകരിക്കുന്നു. സ്റ്റേറ്റിൽ ഒരു പിശക് ഉണ്ടെങ്കിൽ, നൽകിയിട്ടുള്ള fallback കമ്പോണന്റോ അല്ലെങ്കിൽ ഒരു ഡിഫോൾട്ട് പിശക് സന്ദേശമോ ഇത് റെൻഡർ ചെയ്യും. അല്ലാത്തപക്ഷം, അത് ചിൽഡ്രനെ റെൻഡർ ചെയ്യും. ഇത് നമ്മുടെ എറർ ബൗണ്ടറിയായി പ്രവർത്തിക്കുന്നു. ഡിപെൻഡൻസി അറേ `[error]` എന്നത് `error` സ്റ്റേറ്റ് മാറുമ്പോൾ ഇത് വീണ്ടും റെൻഡർ ചെയ്യുന്നു എന്ന് ഉറപ്പാക്കുന്നു.
• captureError ഫംഗ്ഷൻ: എറർ സ്റ്റേറ്റ് സെറ്റ് ചെയ്യാൻ ഈ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു. റിസോഴ്സുകൾ ലോഡ് ചെയ്യുമ്പോൾ ഒരു try...catch ബ്ലോക്കിനുള്ളിൽ നിങ്ങൾ ഇത് വിളിക്കും.
• resetError ഫംഗ്ഷൻ: ഈ ഫംഗ്ഷൻ എറർ സ്റ്റേറ്റ് ക്ലിയർ ചെയ്യുന്നു, ഇത് കമ്പോണന്റിനെ അതിന്റെ ചിൽഡ്രനെ വീണ്ടും റെൻഡർ ചെയ്യാൻ അനുവദിക്കുന്നു (റിസോഴ്സ് ലോഡിംഗ് വീണ്ടും ശ്രമിക്കാൻ സാധ്യതയുണ്ട്).

എറർ ഹാൻഡ്‌ലിംഗോടുകൂടി റിസോഴ്സ് ലോഡിംഗ് നടപ്പിലാക്കുന്നു

ഇനി, റിസോഴ്സ് ലോഡിംഗ് പിശകുകൾ കൈകാര്യം ചെയ്യാൻ ഈ ഹുക്ക് എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നോക്കാം. ഒരു എപിഐയിൽ നിന്ന് ഉപയോക്തൃ ഡാറ്റ ലഭ്യമാക്കുന്ന ഒരു കമ്പോണന്റ് പരിഗണിക്കുക:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry